<template>
 <div class="yingmoo-media">
   <ym-header></ym-header>
   <ym-medianav></ym-medianav>
   <ym-secondnav></ym-secondnav>
    <div class="ym-lunbo">
      <el-carousel indicator-position="inside">
        <el-carousel-item v-for="(v,i) in banners" :key="i">
          <img :src="v.imgpath" />
        </el-carousel-item>
      </el-carousel>
    </div>
<!--  精选媒体  -->
    <div class="yingmoo-template-model">
      <div class="column-navbar grey">
        <h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">精选媒体</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
        <p class="column-citys">
          <span>北京</span>
          <span>上海</span>
          <span>广州</span>
          <span>深圳</span>
          <span>更多</span>
        </p>
      </div>
      <div class="column-content">
      	<ul>
      		<li class="media-model" style="float:left; margin:8px;" v-for="n in list1" :key="n">
		        <dl>
		          <dt>
		            <img width="222px" height="198px" :src="n.imgpath" />
		          </dt>
		          <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
		          <dd class="media-text-secend">￥{{n.price}}</dd>
		          <dd class="media-text-city">{{n.remark}}</dd>
		        </dl>      			
      		</li>
      	</ul>
      </div>
    </div>
<!--  热门媒体  -->
    <div class="yingmoo-template">
      <div class="column-navbar grey">
        <h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">热门媒体</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
      </div>
      <div class="column-content">
      	<ul>
      		<li class="media-model" style="float:left; margin:8px;" v-for="n in list2" :key="n">
		        <dl>
		          <dt>
		            <img width="222px" height="198px" :src="n.imgpath" />
		          </dt>
		          <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
		          <dd class="media-text-secend">￥{{n.price}}</dd>
		          <dd class="media-text-city"><span>{{n.remark}}</span></dd>
		        </dl>
		    </li>
		</ul>
      </div>
    </div>
<!--  最新媒体  -->
    <div class="yingmoo-template">
      <div class="column-navbar grey">
        <h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">最新媒体</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
      </div>
      <div class="column-content">
      	<ul>
      		<li class="media-model" style="float:left; margin:8px;" v-for="n in list3" :key="n">
		        <dl>
		          <dt>
		            <img width="222px" height="198px" :src="n.imgpath" />
		          </dt>
		          <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
		          <dd class="media-text-secend">￥{{n.price}}</dd>
		          <dd class="media-text-city"><span>{{n.remark}}</span></dd>
		        </dl>
      		</li>
      	</ul>
      </div>
    </div>
<!--  机场专区馆  -->
   <div class="yingmoo-airport">
     <img src="../assets/ym-media/airports.png" class="airports" />
     <div class="airport-model">
       <img v-for="v in list4" :key="v" :src="v.imgpath" class="airport-map" />
       <div class="airport-pictures">
         <img width="286px" height="191px" v-for="n in list5" :key="n" :src="n.imgpath" />
         <!--<img src="../assets/ym-media/airport-picture.png" />
         <img src="../assets/ym-media/airport-picture.png" />
         <img src="../assets/ym-media/airport-picture.png" />-->
       </div>
     </div>
   </div>
    <ym-footer></ym-footer>
 </div>
</template>
<script>
import ymHeader from "@/components/ymHeader.vue";
import ymMedianav from "@/components/ymMedianav.vue";
import ymFooter from "@/components/ymFooter.vue";
import ymSecondnav from "@/components/ymSecondnav.vue";
export default {
  name: "yingmoo-media",
  components: {
    ymHeader,
    ymMedianav,
    ymSecondnav,
    ymFooter
  },
  data() {
    return {
      requestAddr: this.GLOBAL.addr,
      /* banner数据，方便修改 */
      banners: [
        {
          imgUrl: require("@/assets/ym-media/media-lunbo-airport.png")
        },
        {
          imgUrl: require("@/assets/ym-media/media-lunbo-airport.png")
        },
        {
          imgUrl: require("@/assets/ym-media/media-lunbo-airport.png")
        }
      ],
      model: [
        {
          modeltext: "媒体名称媒体名称媒体名称",
          modelmoney: "价格：120万 元/年",
          modelcity: "北京西站",
          modellook: "看板"
        },
        {
          modeltext: "媒体名称媒体名称媒体名称",
          modelmoney: "价格：120万 元/年",
          modelcity: "北京西站",
          modellook: "看板"
        },
        {
          modeltext: "媒体名称媒体名称媒体名称",
          modelmoney: "价格：120万 元/年",
          modelcity: "北京西站",
          modellook: "看板"
        },
        {
          modeltext: "媒体名称媒体名称媒体名称",
          modelmoney: "价格：120万 元/年",
          modelcity: "北京西站",
          modellook: "看板"
        },
        {
          modeltext: "媒体名称媒体名称媒体名称",
          modelmoney: "价格：120万 元/年",
          modelcity: "北京西站",
          modellook: "看板"
        }
      ],
      list1: [],
      list2: [],
      list3: [],
      list4: [],
      list5: []
    };
  },
  mounted() {
    this.getList(54, 3);
    this.getList(55, 10);
    this.getList(56, 10);
    this.getList(57, 10);
    this.getList(58, 1);
    this.getList(59, 4);
  },
  methods: {
    getList: function(adid, limit) {
      this.$http({
        url:
          this.requestAddr +
          "/GetJson/get/adshow?adid=" +
          adid +
          "&limit=" +
          limit,
        method: "JSONP",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        jsonp: "callbackparam"
      })
        .then(res => {
          /*console.log(res.data);*/
          if (res.data != null) {
            if (adid == 54) {
              this.banners = res.data;
            }
            if (adid == 55) {
              this.list1 = res.data;
            }
            if (adid == 56) {
              this.list2 = res.data;
            }
            if (adid == 57) {
              this.list3 = res.data;
            }
            if (adid == 58) {
              this.list4 = res.data;
            }
            if (adid == 59) {
              this.list5 = res.data;
            }
          }
        })
        .catch();
    }
  }
};
</script>

<style scoped lang="less">
.yingmoo-media {
  width: 100%;
  background-color: #f3f9ff;
  .ym-lunbo {
    width: 100%;
    height: 450px;
    position: absolute;
    top: 234px;
    left: 0;
    z-index: 1;
  }
  .yingmoo-template-model {
    width: 1200px;
    margin: 0 auto;
    margin-top: 30px;
    .column-navbar {
      height: 44px;
      line-height: 44px;
      position: relative;
      &.grey {
        background-color: #e6e6e6;
      }
      .column-title {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        width: 247px;
        color: #fbb03b;
        font-size: 18px;
        background-color: #036eb7;
        .column-icon {
          margin-left: 26px;
        }
        .column-arrow {
          position: absolute;
          right: -26px;
          top: 0;
        }
      }
      .column-citys {
        line-height: 44px;
        width: 350px;
        background: none;
        color: #999999;
        margin-right: 30px;
        float: right;
        span {
          padding-left: 15px;
          padding-right: 20px;
          font-size: 14px;
        }
      }
    }
    .column-content {
      width: 1200px;
      background-color: transparent;
      display: flex;
      justify-content: space-between;
      .media-annimation {
        margin-top: 20px;
      }
      .media-model {
        width: 224px;
        height: 291px;
        margin-top: 20px;
        dd {
          background-color: white;
          height: 24px;
          line-height: 24px;
        }
        .media-text-first {
          font-size: 14px;
          padding-top: 9px;
          overflow: hidden;
          text-overflow: clip;
          padding-left: 10px;
        }
        .media-text-secend {
          padding-left: 10px;
          font-size: 12px;
          color: red;
        }
        .media-text-city {
          padding-left: 10px;
          font-size: 12px;
          color: #999999;
          padding-bottom: 6px;
        }
      }
    }
  }
  .yingmoo-template {
    width: 1200px;
    margin: 0 auto;
    margin-top: 30px;
    .column-navbar {
      height: 44px;
      line-height: 44px;
      position: relative;
      &.grey {
        background-color: #e6e6e6;
      }
      .column-title {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        width: 247px;
        color: #fbb03b;
        font-size: 18px;
        background-color: #036eb7;
        .column-icon {
          margin-left: 26px;
        }
        .column-arrow {
          position: absolute;
          right: -26px;
          top: 0;
        }
      }
    }
    .column-content {
      width: 1200px;
      background-color: transparent;
      display: flex;
      justify-content: space-between;
      .media-model {
        width: 224px;
        height: 291px;
        margin-top: 20px;
        dd {
          background-color: white;
          height: 24px;
          line-height: 24px;
          padding-left: 10px;
        }
        .media-text-first {
          font-size: 15px;
          padding-top: 9px;
          overflow: hidden;
          text-overflow: clip;
        }
        .media-text-secend {
          font-size: 12px;
          color: red;
        }
        .media-text-city {
          font-size: 12px;
          color: #999999;
          padding-bottom: 6px;
        }
      }
    }
  }
  .yingmoo-airport {
    width: 1200px;
    margin: 0 auto;
    margin-top: 25px;
    .airport-model {
      height: 460px;
      margin-top: 20px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      background-color: white;
      .airport-map {
        width: 461px;
        height: 380px;
      }
      .airport-pictures {
        width: 590px;
        height: 402px;
        :nth-child(even) {
          margin-left: 13px;
        }
        :nth-child(3) {
          margin-top: 17px;
        }
      }
    }
  }
}
</style>
